<template>

      <div class="table">
      <el-form :model="dataForm">
       
      
      <div class="table_title td_color">借款人信息</div>
      <table class="table_wrap">
        <tbody>
          <tr>
            <td class="table_td td_color">
                姓名
            </td>
            <td class="table_td">
            <el-input  v-model="dataForm.realName"/> 
            </td>
            <td class="table_td td_color">
                身份证号
            </td>
            <td class="table_td">
                {{dataForm.idCardNo}}
            </td>
            <td class="table_td td_color">
                  民族
            </td>
            <td class="table_td">
              <DicSelect dictType = "民族" :dictValue="dataForm.national" v-on:dictValue="dataForm.national = $event"/>
            </td>
            <td class="table_td td_color">
                 婚姻情况  
            </td>
            <td class="table_td">
              <DicSelect dictType = "婚姻情况" :dictValue="dataForm.marriageStatus" v-on:dictValue="dataForm.marriageStatus = $event"/>
            </td>
            <td class="table_td td_color">
                 工作单位
            </td>
            <td class="table_td">
            <el-input  v-model="dataForm.workCompany"/> 
            </td>
            <td class="table_td td_color">
                岗位/职务
            </td>
            <td class="table_td">
            <el-input  v-model="dataForm.position"/> 
            </td>
          </tr>
          <!--第二行-->
          <tr>
            <td class="table_td td_color">
                性别
            </td>
            <td class="table_td">
                {{dataForm.sexName}}
            </td>
            <td class="table_td td_color">
                年龄
            </td>
            <td class="table_td">
                {{dataForm.age}}
            </td>
            <td class="table_td td_color">
                联系方式
            </td>
            <td class="table_td">
            <el-input  v-model="dataForm.mobile"/> 
            </td>
            <td class="table_td td_color">
                 现居住地  
            </td>
            <td class="table_td">
            <el-input  v-model="dataForm.liveAddress"/> 
            </td>
            <td class="table_td td_color">
                 户籍所在地
            </td>
            <td class="table_td">
            <el-input  v-model="dataForm.householdAddress"/> 
            </td>
            <td class="table_td td_color">
                电子邮箱
            </td>
            <td class="table_td">
            <el-input  v-model="dataForm.email"/> 
            </td>
          </tr>
          <!--第三行-->
          <tr>
            <td class="table_td td_color">
                家庭人数
            </td>
            <td class="table_td">
            <el-input type="number"  v-model="dataForm.famliyNum"/> 
            </td>
            <td class="table_td td_color">
                银行卡号码
            </td>
            <td colspan="3" class="table_td">
            <el-input  v-model="dataForm.bankCard"/> 
            </td>
            <td class="table_td ">
                
            </td>
            <td class="table_td">

            </td>
            <td class="table_td ">
                   
            </td>
            <td class="table_td">

            </td>
            <td class="table_td ">
                 
            </td>
            <td class="table_td">

            </td>
          </tr>
          <!--第四行-->
          <tr v-for="item in dataForm.clientFamliys" :key="item.realName">
            <td colspan="2" class="table_td td_color">
                关系
            </td>
            <td colspan="2" class="table_td">
            <DicSelect dictType = "与借款人关系" :dictValue="item.relation" v-on:dictValue="item.relation = $event"/> 
            </td>
            <td colspan="2" class="table_td td_color">
                姓名
            </td>
            <td colspan="2" class="table_td">
            <el-input  v-model="item.realName"/> 
            </td>
            <td colspan="2" class="table_td td_color">
                联系电话
            </td>
            <td colspan="2" class="table_td">
            <el-input  v-model="item.mobile"/> 
            </td>
            
          </tr>

        </tbody>
      </table>

  <!--第二个表格  共款人信息-->
        <div  v-for="(item,index) in ownerList" :key="index">
          <div class="table_title td_color" style="margin-top:30px;">共借人信息（{{index+1}}）</div>
         <table class="table_wrap" >
        <tbody>
          <tr>
            <td class="table_td td_color">
                姓名
            </td>
            <td class="table_td">
            <el-input  v-model="item.realName"/> 
            </td>
            <td class="table_td td_color">
                身份证号
            </td>
            <td class="table_td">
                {{item.idCardNo}}
            </td>
            <td class="table_td td_color">
                  民族
            </td>
            <td class="table_td">
            <DicSelect dictType = "民族" :dictValue="item.national" v-on:dictValue="item.national = $event"/> 
            </td>
            <td class="table_td td_color">
                 婚姻情况  
            </td>
            <td class="table_td">
            <DicSelect dictType = "婚姻情况" :dictValue="item.marriageStatus" v-on:dictValue="item.marriageStatus = $event"/> 
            </td>
            <td class="table_td td_color">
                 性别  
            </td>
            <td class="table_td">
                {{item.sexName}}
            </td>
            <td class="table_td td_color">
                 年龄  
            </td>
            <td class="table_td">
                {{item.age}}
            </td>
          </tr>
          <tr>
            <td class="table_td td_color">
                联系方式
            </td>
            <td class="table_td">
            <el-input  v-model="item.mobile"/> 
            </td>
            <td class="table_td td_color">
                现居住地址
            </td>
            <td class="table_td">
            <el-input  v-model="item.liveAddress"/> 
            </td>
            <td class="table_td td_color">
                  户籍所在地
            </td>
            <td class="table_td">
            <el-input  v-model="item.householdAddress"/> 
            </td>
            <td class="table_td td_color">
                 电子邮箱  
            </td>
            <td class="table_td">
            <el-input  v-model="item.email"/> 
            </td>
            <td class="table_td td_color">
                 家庭人数  
            </td>
            <td class="table_td">
            <el-input type="number"  v-model="item.famliyNum"/> 
            </td>
            <td class="table_td td_color">
                   
            </td>
            <td class="table_td">
            </td>
          </tr>
          <tr>
            <td class="table_td td_color">
                银行卡号码
            </td>
            <td colspan="2" class="table_td">
            <el-input  v-model="item.bankCard"/> 
            </td>
            <td class="table_td">
            </td>
            <td class="table_td ">
            </td>
            <td class="table_td">
            </td>
            <td class="table_td">
            </td>
            <td class="table_td">
            </td>
            <td class="table_td">
            </td>
            <td class="table_td">
            </td>
            <td class="table_td">
            </td>
            <td class="table_td">
            </td>
          </tr>

        </tbody>
      </table>
      </div>

  <!--第二个表格-->
          <div class="table_title td_color" style="margin-top:30px;">申请借款信息栏</div>
         <table class="table_wrap" >
        <tbody>
          <tr>
            <td class="table_td td_color">
                申请金额
            </td>
            <td class="table_td">
            <el-input type="number" v-model="projectInfo.applyAmount"><template slot="append">万</template></el-input> 
            </td>
            <td class="table_td td_color">
                抵押类型
            </td>
            <td class="table_td">
            <DicSelect dictType = "抵押类型" :dictValue="projectInfo.pledgeType" v-on:dictValue="projectInfo.pledgeType = $event"/> 
            </td>
            <td class="table_td td_color">
                  申请期限
            </td>
            <td class="table_td">
            <DicSelect dictType = "申请期限" :dictValue="projectInfo.applyTerm" v-on:dictValue="projectInfo.applyTerm = $event"/>
            </td>
            <td class="table_td td_color">
                 还款方式  
            </td>
            <td class="table_td">
            <DicSelect dictType = "还款方式" :dictValue="projectInfo.repayMethod" v-on:dictValue="projectInfo.repayMethod = $event"/> 
            </td>
            <td class="table_td td_color">
                 资方  
            </td>
            <td class="table_td">
              <el-input type="text" disabled  v-model="projectInfo.capitalSourceName"></el-input> 

              <!-- <el-select 
              style="min-width:100%;"
              disabled
              v-model="projectInfo.capitalSource" 
            >
              <el-option v-for="(item) in capitalList" value-key="id" :key="item.id" :value="item.id" :label="item.capitalName"></el-option>
            </el-select> -->
            <!-- <DicSelect dictType = "资方" :dictValue="projectInfo.capitalSource" v-on:dictValue="projectInfo.capitalSource = $event"/>  -->
            </td>
            <td class="table_td td_color">
                产品 
            </td>
            <td class="table_td">
              <el-input type="text" disabled  v-model="projectInfo.productName"></el-input> 
            </td>
          </tr>
          <tr>
            <td class="table_td td_color">
                利率 
            </td>
            <td class="table_td">
              <el-input type="number" disabled v-model="projectInfo.annualInterestRate"><template slot="append">%</template></el-input>
            </td>
            <td class="table_td td_color">
                开放城市 
            </td>
            <td class="table_td">
              <el-select 
              v-model="projectInfo.openCity" 
              placeholder="请选择开放城市" 
              disabled
            >
              <el-option v-for="(item) in chooseList" value-key="areaCode" :key="item.areaCode" :value="item.areaCode" :label="item.areaName"></el-option>
            </el-select>
            </td>
            <td class="table_td td_color">
                借款次数
            </td>
            <td class="table_td">
            <el-input type="number"  v-model="projectInfo.loanNumber"><template slot="append">次</template></el-input> 
            </td>
            <td class="table_td td_color">
                 渠道名称  
            </td>
            <td colspan="3" class="table_td">
             <el-select v-model="projectInfo.channelId" clearable placeholder="请选择" style="min-width:100%;">
            <el-option
              v-for="item in channelList"
              :key="item.id"
              :label="item.channelName"
              :value="item.id"/>
            </el-select>
            </td>
            <td class="table_td td_color">
                客户经理
            </td>
            <td class="table_td">
                {{projectInfo.creatorName}} 
            </td>
          </tr>
          <tr>
            
          </tr>
        </tbody>
      </table>
    <!--第三个表格-->
      <div v-if="operationLook === undefined && projectStatus === 18">
        <el-table
          :data="taskDataRow"
          highlight-hover-row
          show-header-overflow
          show-overflow
          align="center"
          style="border: 1px solid #c7c7c7;margin-top:30px;"
          :header-cell-style="{ background: '#f4f4f4', color: '#606266' ,borderBottom: '1px solid #c7c7c7'}"
           ref="multipleTable"
          
        >
        
          <el-table-column
            type="selection"
            width="55"
            :selectable='selectInit'>
          </el-table-column>
          <el-table-column align="center" label="资方名称" prop="capitalName" min-width="120"/>
          <el-table-column align="center" label="产品名称" prop="productName"  min-width="180"/>
          <el-table-column align="center" label="利率" prop="oneBetRate" min-width="120" v-if="projectInfo.pledgeType == 1 || projectInfo.pledgeType == 3"/>
          <el-table-column align="center" label="利率" prop="twoBetRate" min-width="120" v-else/>
          <el-table-column align="center" label="准入情况" prop="checkStatus">
            <template v-slot="{ row }">
              <span :class="!row.checkStatus?'col-red':''">{{row.checkStatus?'准入':'不准入'}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="不准入原因" prop="checkFailReason" min-width="180">
            <template v-slot="{ row }">
              <span>{{row.checkStatus?'-':row.checkFailReason}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right">
            <template v-slot="{ row }">
              <el-button type="text" @click="seeDetail(row)">准入检测详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="table_title td_color" style="margin-top:30px;">选择最终的资方</div>
           <vxe-table
              :data="taskDataCheckRow"
              border="none"
              highlight-hover-row
              show-header-overflow
              show-overflow
              highlight-current-row
              @current-change="handleCurrentChange"
              align="center"
              ref="capital"
              style="border: 1px solid #c7c7c7;"
              :header-cell-style="{ background: '#f4f4f4', color: '#606266' ,borderBottom: '1px solid #c7c7c7'}"
              
            >
              <vxe-table-column title="资方名称" field="capitalName" min-width="120"/>
              <vxe-table-column title="产品名称" field="productName"  min-width="180"/>
              <vxe-table-column title="利率" field="oneBetRate" min-width="120" v-if="projectInfo.pledgeType == 1 || projectInfo.pledgeType == 3"/>
              <vxe-table-column title="利率" field="twoBetRate" min-width="120" v-else/>
            </vxe-table>
      </div>
       
      </el-form>
     
           <!--v-if="operationLook === undefined"-->
        <div style="width:600px;margin-top:5%;margin-left:35%;" >
          <el-button type="primary" @click="queryCapital" style="width:150px;height:40px;" v-if="operationLook === undefined && projectStatus === 18">确定资方</el-button>
                <!-- <el-button  type="primary" @click="restForm" style="width:150px;height:40px;">清空</el-button> -->
            <el-button type="warning" @click="updateData" style="width:150px;height:40px;" v-permission="'system:project-info:edit'" v-if="operationLook === undefined && projectStatus === 18">保存</el-button>
            <el-button  v-permission="'system:project-info:print'"  type="primary" @click="exportData" style="width:150px;height:40px;">打印</el-button>
        </div>
        

      
    <el-dialog title="资方+产品+检测详情" :visible.sync="dialogVisible" :close-on-click-modal="false" >
      
      <el-table height="500" border  :data="rowDateil" size="small" element-loading-text="正在查询中。。。" :header-cell-style="{background:'#F7F7F8',color:'#606266'}" fit highlight-current-row>
        <el-table-column
          type="index"
          align="center"
          width="50">
        </el-table-column>
        <el-table-column align="center" label="要素" prop="ruleName" />
        <el-table-column align="center" label="范围" prop="scope" min-width="200"/>
        <el-table-column align="center" label="客户信息" prop="customerInput"/>
        <el-table-column align="center" label="检测情况" prop="checkResult" >
          <template v-slot="{ row }">
            <span :class="row.checkResult == '通过'?'':'col-red'">{{row.checkResult}}</span>
          </template>
        </el-table-column>
        
      </el-table>
      
    </el-dialog>
      </div>
    </div>
  
</template>

<script>
import { findByProjectId,findListByProjectId,updateBorrower,batchUpdateOwnerBorrower,confirmCapital,exportInfo} from '@/api/borrower'
import { findProjectBytId,createProjectInfoDraft,updateProject,findCityList } from '@/api/project'
import { capitalMatch,caitalList } from '@/api/projectFile'
import {quertAllCapitalNew} from "@/api/dashboard";
import { chooseChannel } from '@/api/channel'
import DicSelect from '@/components/select'
  export default {
    components: { DicSelect },
    props:{
      projectId: undefined,
      taskId: undefined,
      operationLook: undefined,
      projectStatus: undefined,
      taskData:{
        type: Array,
        default:[]
      },
      taskDataCheck:{
        type: Array,
        default:[]
      }
    },
    data () {
      return {
         headData: "",
         dataForm:{},
         projectInfo:{},
         ownerList:[],
         channelList: [],
         currentRow:null,
         capitalList:[],
         chooseList:[],
         dialogVisible:false,
         rowDateil:[],
         taskDataCheckRow:[],
         taskDataRow:[]
      }
    },
    created(){
      this.findByProjectId()
      this.findListByProjectId()
      this.findProjectBytId()
      this.getChannelList()
      this.getChoose()
      // this.getCapital()
      this.getCapitalList()
      // this.getCapitalTrue()
      this.$emit('getCapital');
      this.$emit("getCapitalTrue")
    },
    watch:{
      taskData(newVal){
        console.log(newVal,'val')
        this.taskDataRow = newVal
        setTimeout(()=>{
            this.taskDataRow.map(item => {
              if(item.selectedStatus){
                this.$refs.multipleTable.toggleRowSelection(item,true);
              }
            })
          },100)
      },
      taskDataCheck(newV) {
        this.taskDataCheckRow = newV
      }
    },  
    methods: {
       findByProjectId() {
      findByProjectId({projectId:this.projectId})
        .then(response => {
          if(response.data != undefined ) {
            this.dataForm = response.data
          }
        })
        .catch(() => {
          this.dataForm = undefined
        })
    },
       findProjectBytId() {
      findProjectBytId({projectId:this.projectId})
        .then(response => {
          if(response.data != undefined ) {
            let data = response.data
            // data.openCity?data.openCity = data.openCity.split(','):undefined;
            this.projectInfo = data
          }
        })
        .catch(() => {
          this.projectInfo = undefined
        })
    },
       findListByProjectId() {
         let _this = this;
      findListByProjectId({projectId:this.projectId})
        .then(response => {
          if(response.data != undefined ) {
            _this.ownerList = response.data
            _this.ownerList.forEach((item,index)=>{
              item.taskId = _this.taskId
              item.projectId = _this.projectId
            })
          }
        })
        .catch((error) => {
          console.log(error)
          _this.ownerList = []
        })
    },
    getChoose() {
      findCityList()
        .then((res) => {
          this.chooseList = res.data
        }).catch(() => {
           this.chooseList = []
        })
    },
    getChannelList() {
      chooseChannel()
        .then(response => {
          this.channelList = response.data
        })
        .catch(() => {
          this.channelList = []
        })
    },
    getCapitalList() {
      quertAllCapitalNew()
        .then(res => {
          this.capitalList = res.data
        })
        .catch(() => {
          this.capitalList = []
        })
    },
    updateData(){
      this.updateBorrower()
      this.batchUpdateOwnerBorrower()
      this.updateProject()
    },
    updateBorrower(){
          this.dataForm.projectId = this.projectId
          this.dataForm.taskId = this.taskId
          updateBorrower(this.dataForm)
           .then(response => {
            this.findByProjectId()
            if( this.ownerList.length == 0) {
               this.$notify.success({
                title: '成功',
                message: '编辑成功'
              })
            }
            console.log("借款人编辑成功")
             })
              .catch(response => {
                })         
    },
    batchUpdateOwnerBorrower(){
        if( this.ownerList.length == 0) {
          return false
        }
        batchUpdateOwnerBorrower(this.ownerList)
            .then(response => {
              this.findListByProjectId()
              this.$notify.success({
                title: '成功',
                message: '编辑成功'
              })
            })
            .catch(response => {
            })
    },
    updateProject(){
        this.projectInfo.taskId = this.taskId
        updateProject(this.projectInfo)
            .then(response => {
              this.findProjectBytId()
              console.log("项目信息编辑成功")
              capitalMatch({projectId:this.projectId}).then(res => {
                if(res.data) {
                  this.$emit('getCapital');
                  this.$emit("getCapitalTrue")
                }else{
                  this.$notify.error({
                    title: '失败',
                    message: '资方更新失败'
                  })
                }
              }).catch(() => {
                this.$notify.error({
                    title: '失败',
                    message: '资方更新失败'
                  })
              })
            })
            .catch(response => {
              console.log(response)
            })
    },
    handleCurrentChange(val) {
        this.currentRow = val;
      },
      queryCapital(row) {
        const currentRow = this.currentRow;
        if(!currentRow) {
          this.$message.error('请选择资方');
        }else{
         confirmCapital({projectId:this.projectId,capitalSourceId: currentRow.row.capitalSourceId})
          .then(res => {
            if(res.data) {
              this.$notify.success({
                title: '成功',
                message: '确认资方成功'
              })
              this.currentRow = null
              this.$refs.capital.setCurrentRow(row)
              this.findProjectBytId()
            }
            
          })
        }
      },
      
      exportData() {

        exportInfo({projectId: this.projectId})
            .then((res) => {
              // this.$notify.success({
              //   title: '成功',
              //   message: '导出成功'
              // })
              const content = res.data
              window.open(content.fileUrl)
            })
            .catch(response => {
              console.log(response)
              this.$notify.error({
                title: '失败',
                message: response.data.message
              })
            })
      },
      
    selectInit(row,index) {
        return false  //不可勾选
      },
      seeDetail(row) {
        this.dialogVisible = true
        this.rowDateil = row.matchDetailDTOS
      },
    },
  }
</script>

<style>
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner{
   background-color: #409EFF;
    border-color: #409EFF;
}
.table .el-input.is-disabled .el-input__inner {
  background: #fff;
  color:#606266;
  border-color:#fff;
  cursor: default;
}
.table .el-input__inner{
  height:52px;
  line-height: 55px;
  border:0px solid;
}

.table .el-input-group__append{
  border:0px solid;
}

.table {
  background-color: #fff;
  width: 100%;
}
.table_title{
  background-color: #fff;
  border-top: 1px solid #c7c7c7;
  border-right: 1px solid #c7c7c7;
  border-left: 1px solid #c7c7c7;
  width: 100%;
  background-color: #fff;
  text-align: center;
  line-height: 50px;
}
.table_wrap{
  border-collapse: collapse;
  border-spacing: 0px;
  width: 100%;

}

.table_td {
  text-align: center;
  line-height: 50px;
  min-width: 90px;
  border: 1px solid #c7c7c7;
}
.td_color{
  background-color: #f4f4f4;
}
.col-red{
  color:red;
}
</style>